When you complete this 


chapter, you will be able 


to: 


Understand the differences 


between the Web-based 
image file formats: GIF, 
JPG, and PNG 


Know which type of file 
format to use for which 
type of image 


Understand the basics of 
computer color 


Use the «IMG» element 
and attributes to display 
images effectively 


Use hexadecimal color 
values to add color to 
your pages 


Graphics and Color 


Using graphics and text together is the characteristic that makes the Web so 
attractive and popular, but it also can be the undoing of many Web sites. Use 
graphics wisely, and you can create an attractive and engaging Web site. If you 
use too many images or graphics that are too large or complex, your user will 
have to endure long download times, and they may not wait. Balance the mix- 
ture of images and text, and use the image capabilities of HTML to suit your 
user's needs. Test your work in a variety of browsers and at a range of connec- 
tion speeds to make sure downloading your graphics does not discourage your 


readers. 


The incorrect use of color in many Web sites creates unreadable text or navi- 
gation confusion for the user. Use color judiciously to communicate and to 
guide the reader, or to create branded areas of your site. Test your color 


choices carefully to make sure they appear properly across different browsers. 
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FILE FORMAT BASICS 


You currently can use only three image file formats on the Web: GIE JPG, and 
PNG.These formats all compress images to create smaller files. Knowing which 
file format to use for which type of image is important. If you choose the wrong 
file type, your image will not compress or appear as you expect. Color depth 
(described in the “Color Basics" section of this chapter) is a factor in image file 
format as well. Of the three Web-based image file formats, JPG supports 24-bit 
color, GIF supports 8-bit color, and PNG supports both 8-bit and 24-bit color. The 
file format's color depth controls the number of colors the image can display.The 
greater the bit depth, the greater the number of colors that can be displayed. 


GIF 
The Graphics Interchange Format (GIF) is designed for online delivery of 
graphics. GIF uses a lossless compression technique, meaning that no color 
information is discarded when the image is compressed. 

The color depth of GIF is 8-bit, allowing a palette of no more than 256 colors. 
In fact, the fewer colors you use, the greater the compression, which results in 
smaller file size.The GIF file format excels at compressing and displaying flat color 
areas, making it the logical choice for line art and color graphics. Because of its lim- 
ited color depth, GIF is not the best file format for photographs or more complex 
graphics that have gradations of color, such as shadows and feathering. 


GIF Transparency 
With GIF files you can choose one color in an image to appear as transparent 
in the browser. The background color or pattern will show through the areas 
that you have designated as transparent. Using transparent areas allows you to 
create graphics that appear to have an irregular outside shape, rather than being 
bounded by a rectangle. Figure 7-1 shows the same shape with and without 
transparency. 

You can create transparent areas using a graphics editor. When you choose 
the transparent color, all pixels of that color in the image will let the background 
color show through. In Figure 7-1, white was chosen as the transparent color. 


GIF Animation 

The GIF format lets you store multiple images and timing information about the 
images in a single file. This means that you can build animations consisting of 
multiple static images that play continuously, creating the illusion of motion. 
This is exactly the same technique used in cell-based animation. You can create 
animated GIFs with a variety of both shareware and commercial software. 


FIGURE 7-1 
Transparent and 
non-transparent GIFs 


FIGURE 7-2 
Individual frames of a 
GIF animation 
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When you create a GIF animation, you can determine the time between 
frames and the number of times the animation plays. With a little imagination, 
you can create all types of effects including text scrolls, color changes, animated 
icons, and slide shows. Figure 7-2 shows a series of individual GIFs that can be 
combined to play as an animated GIE The final GIF animation file is a single file 
whose name ends in the .GIF extension. 


GIF animation is somewhat limited when compared to the results of other 
proprietary animation tools such as Macromedia Shockwave or Flash, which 
can play synchronized sounds and allow Web users to interact with the anima- 
tion. Creating animations with these applications, however, requires browser 
plug-ins, and viewing the animations demands heavy download times. Unlike 
most proprietary tools, you do not need any special plug-ins to view animated 
GIFs, and, if you limit color and motion when creating your animations, you can 
keep your file sizes small for faster downloads. 

Use restraint when adding animated GIFs, such as blinking icons and 
scrolling banners, to your pages. Users may find them annoying because they are 
repetitive and distract from the page content. Consider choosing to play an ani- 
mation only a certain number of times rather than letting them loop endlessly. 
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TABLE 7-1 
GIF animation tools 


FIGURE 7-3 


Photoshop's JPEG 
Options dialog box 


TIP 


Whether you are cre- 
ating GIFs or JPGs, 
remember always to 
save an original copy 
of your artwork or 
photo. Both file for- 
mats permanently 
degrade the quality of 
an image as a result 
of compression. Once 
you have converted to 
GIF or JPG you cannot 
return to the original 
image quality. 


You can create animated images with GIF animation software.These tools stream- 
line the process of setting the timing, color palette, and individual frame effects. 
See Table 7-1 for a list of GIF animation tools. 


Microsoft Liquid Motion www.microsoft.com/liquidmotion 


GIF Construction Set Professional www.mindworkshop.com/alchemy/gifcon 


Ulead GIF Animator www.webutilities.com/products/gani 


JPG 

The Joint Photographic Experts Group (JPG, sometimes called JPEG) format 
is best for photographs or continuous tone images. JPGs are 24-bit images that 
allow millions of colors. Unlike GIFs, JPGs do not use a palette to display color. 

JPGs use a lossy compression routine specially designed for photographic 
images. When the image is compressed, some color information is discarded, 
resulting in a loss of quality from the original image. Since the display device is 
the low-resolution computer monitor, the loss of quality usually is not notice- 
able. Furthermore, the resulting faster download time compensates for the loss 
of image quality. 

Using Adobe Photoshop or other imaging software, you can translate pho- 
tographic images into JPG format. When you create the JPG file, you also can 
balance manually the amount of compression versus the resulting image qual- 
ity. Figure 7-3 shows the Photoshop JPEG Options dialog box as an example. 


m Image Options ———— — — — — — — Co] 
Quality: [E [Medium =] 
small file large file _Cancel_| 
ee 
r- Format Options Slider lets you 


(* Baseline (‘Standard’) 
C Baseline Optimized 
C Progressive 


balance file size 
vs. image quality 


cans 3 v 


M Save paths 


The Image Options slider lets you adjust the quality of the file. The higher 
the compression, the lower the image quality. You can play with this setting to 
create good-looking files that are as small as possible. Many photos can sustain 
quite a bit of compression while still maintaining image integrity. 


PNG 

The Portable Network Graphics (PNG) format is designed specially for the 
Web. PNG has been available since 1995, but has been slow to gain popularity 
because of its lack of browser support. It is a royalty-free file format that is 
intended to replace GIE This lossless format compresses 8-bit images to smaller 


FIGURE 7-4 

Three passes complete 
this progressive 

JPG image 
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file sizes than GIE PNG also is intended to work as an image-printing format, so 
it supports 8-bit indexed-color, 16-bit grayscale, and 24-bit truecolor images. 
Even though PNG supports 24-bit color, its lossless compression routine does 
not compress as efficiently as JPG. 

PNG supports transparency and interlacing but not animation, although the 
World Wide Web Consortium has created a draft specification for a Multiple- 
image Network Graphics format—MNG, which will support animation. One 
useful feature of PNG is its built-in text capabilities for image indexing, allowing 
you to store a string of identifying text within the file itself. Now that browser 
support is improving for PNG, designers can start to use it more often. 


USING INTERLACING AND PROGRESSIVE DISPLAY 

Most Web-capable graphics editors let you save images in an interlaced or pro- 
gressive format. You can choose this display option when creating GIE PNG, and 
JPG files. GIF and PNG files use an interlacing format, while JPG files use a pro- 
gressive format. Interlacing and progressive formats generally are the same 
thing—the gradual display of a graphic in a series of passes as the data arrives 
in the browser. Each additional pass of data creates a clearer view of the image 
until the complete image is displayed. Figure 7-4 shows three rendering passes 
to display a complete image. 


The only real advantage to displaying graphics in both methods is that users 
see a blurred view of the complete image, giving them something to look at while 
waiting for the entire graphic to download.The disadvantage of choosing this dis- 
play method is that older browsers may not display the graphic properly, and 
more processing power is needed on the user’s machine to render the image. 


WHERE YOU CAN FIND IMAGES 

You can acquire images from a variety of sources. One way is from a graphics 
professional you hire to create and prepare your images. If your budget does not 
allow for funding this service, consider one of the following resources: 


* Stock photo collections: Stock photo collections can cost from thousands 
of dollars for a few images to under $20.00 for thousands of images at 
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TIP 


Do not borrow images 
from other Web sites. 
Although your 
browser allows you to 
copy graphics, you 
should never use 
someone else’s work 
unless it is a public 
domain Web site and 
freely available for 
use. New digital 
watermarking technol- 
ogy lets artists copy- 
right their work with 
an invisible signature. 
If you use someone 
else's graphics, you 
may find yourself in a 
cyber-lawsuit. 


your local computer discount store or mail-order retailer. These collec- 
tions contain royalty-free images that you can use for any Web site. You 
can manipulate the graphics to add or delete text or images, change the 
color, or make any other modifications. Most stock photo collections 
include a built-in browsing program that lets you search for a particular 
image, and some also provide basic image-editing software. 

Digital camera: digital camera lets you take your own photos and use 
them on the Web.These cameras store photos in JPG format, so you do not 
have to convert them. Most also provide image-cataloging software, and 
some include basic image-editing software.The price of digital cameras 
continues to decline, while the quality of the images remains quite good. 
Scanner: Good scanners are available for under $150.00. You can scan 
your own photos or images, and save them as GIE JPG, or PNG files for 
use on your Web site. Remember to set the scanner resolution to 72 dpi 
to match the computer display resolution. 

Public domain Web sites: Many Web sites maintain catalogs of images 
online that are available for download. Some of these sites charge a small 
membership fee, so you can freely download as many images as you want. 
Other public domain Web sites are completely free. 

Create your own: If you need a basic image or if you have graphic design 
skills, you can download a shareware graphics tool and learn to use it. 
Keep the type of image you create simple, such as text on colored back- 
grounds, and use fundamental shapes and lines. Look at examples of the 
graphics on other Web sites. Many are simple but effective and may pro- 
vide a useful model for your own images. 

Clip art: Clip art is a viable alternative for the Web, especially as more pol- 
ished collections become available for sale on CD-ROM. Price generally 
corresponds to quality for clip art—if you pay $9.95 for 20,000 images, 
the quality of the images most likely will reflect the cost. You also can use 
a graphics program to customize clip art to meet your particular needs. 


CHOOSING THE RIGHT FORMAT 


The following list summarizes the advantages and disadvantages of each graphic 
file format for the Web. 


GIF:The everyday file format for all types of simple colored graphics and 
line art. Use GIF sparingly for its animation capabilities to add visual inter- 
est to your pages. GIF's transparency feature lets you seamlessly integrate 
graphics into your Web site. 

JPG: Use JPG for all 24-bit full-color photographic images, as well as more 
complicated graphics that contain color gradients, shadows, and feathering. 
PNG: If the browsers are supporting it, use PNG as a substitute for GIE 
Because PNG does not compress your 24-bit images as well as JPG, do not 
use it for photos. 
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COMPUTER COLOR BASICS 


Before you create or gather graphics for your Web site, you need a basic under- 
standing of how color works on computer monitors. 

Your computer monitor displays color by mixing the three basic colors of 
light: red, green, and blue. Each of these three basic colors is called a color channel. 
Your monitor can express a range of intensity for each color channel, from 0 
(absence of color) to 255 (full intensity of color). Colors vary widely from one 
monitor to the next, based on both the user's preferences and brand of equipment. 


COLOR DEPTH 

The amount of data used to create color on a display is called the color depth. 
If your monitor can display 8 bits of data in each of the 3 color channels, it has 
a 24-bit color depth (8 x 3 = 24). 24-bit images can contain almost 17 million dif- 
ferent colors and are called true color images. Both JPG and PNG support 24-bit 
color. If your users have a 24-bit color display, they can appreciate the full color 
depth of your images. But many monitors cannot display 24-bit images. Some 
have only 16-bit color depth (called high color) and some have only 8-bit color 
depth. If your monitor does not support the full color depth of an image, the 
browser must resort to mixing colors that attempt to match the original colors 
in the image. 


DITHERING 

The browser must mix its own colors when you display a 24-bit image on an 8 bit 
monitor, or in a file format that does not support 24-bit color. Since the 8-bit mon- 
itor has fewer colors to work with (256, to be exact), the browser must try to 
approximate the missing colors by creating colors from the ones the browser 
already has. This type of color mixing is called dithering. Dithering occurs when 
the browser encounters a color that it does not support, such as when you try to 
turn a 24-bit photographic image into an 8-bit, 256-color image. Dithered images 
often appear grainy and pixelated. The dithering will be most apparent in grada- 
tions, feathered edges, or shadows. Figure 7-5 shows the same image in both JPG 
and GIF format at 8-bit, 256 colors. 

The JPG file on the left has a lot of dithering in the sky area of the photo, 
where the browser was forced to mix colors to approximate the existing colors 
in the image.The GIF file on the right exhibits a different type of color matching 
called banding. Unlike dithering, banding is an effort to match the closest col- 
ors from the GIF's palette to the original colors in the photo. When you create a 
GIE you can choose whether or not to use dithering. A non-dithered image will 
be smaller than one that uses dithering, but the banding may create an unac- 
ceptable image. JPGs, when viewed on an 8-bit or 16-bit display, will dither to the 
closest colors. Photos are best saved as JPGs, even when viewed at a lower color 
depth, because the dithering creates a more acceptable image. 
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USING NON-DITHERING COLORS 

One way to control the dithering process is to create images that use non-dithering 
colors. The 216 non-dithering colors that are shared by PCs and Macintoshes are 
called the Web palette or browser-safe colors. The non-dithering palette only 
applies to GIF or 8-bit PNG, not 24-bit JPG.These colors display properly across 
both platforms without dithering. Most Web-capable graphics programs include 
the Web palette colors. If you do create graphics for the Web, to avoid trouble 
use the Web palette as your color palette for all flat-color areas of your graphics. 


CHOOSING A GRAPHICS TOOL 


As a Web designer, you may be in the enviable position of having a complete 
staff of graphic design professionals creating and preparing graphics for your 
site. Most Web designers, however, do not have this luxury. Whether you want 
to or not, you eventually must use a graphics tool. Most of your graphics tasks 
will be simple, such as resizing an image or converting an image from one file 
format to another. More complex tasks could include changing color depth or 
adding transparency to an image. These are tasks that anyone can learn to do, 
using any of the popular graphics software currently available. 

When it comes to creating images, you may want to enlist professional help. 
Your Web site will not benefit if you choose to create your own graphics and you 
are really not up to the task. Professional-quality graphics can greatly enhance the 


TABLE 7-2 


Graphic tools 
Web sites 


TIP 


Graphic Tools 

Web Sites 

The list in Table 7-2 is 
not exhaustive, and 
you may have to try 
different tools to find 
the one that suits 
your needs. 


Graphics and Color // N9 


look of your Web site. Take an honest look at your skills and remember that the 
best Web sites usually are the result of a collaboration of talents. 

You will use graphics software to create or manipulate graphics. Most Web 
designers use Adobe Photoshop. This is an expensive and full-featured product 
that takes time to master. Adobe Illustrator, a high-end drawing/painting tool, 
also is available. Other commercial tools you can consider include Ulead 
PhotoImpact and Macromedia Fireworks. Most are available as downloadable 
demos, so you can try before you buy.In general, look for a tool that meets your 
needs and will not take a long time to learn. Table 7-2 shows a list of Web sites 
for the graphic tools mentioned in the text. 


Adobe Photoshop and Illustrator www.adobe.com 

Graphic Workshop Professional www.mindworkshop.com/alchemy/gwspro 
LView Pro www.lview.com 

Macromedia Fireworks www.macromedia.com 

Paint Shop Pro 6 Wwww.jasc.com 

Ulead Photolmpact www.ulead.com 


Of course, you also can choose from a variety of shareware graphics tools. 
Three of the more established tools are Paint Shop Pro 6, LView Pro, and 
Graphic Workshop Professional. These tools are each priced under $100 and 
contain a full range of image-editing features. Like most other shareware, you 
can download and work with these tools for a trial period. 


USING THE <IMG> ELEMENT 


By definition, <IMG> is a replaced element, meaning that the browser replaces 
the <IMG> element with the image file referenced in the SRC attribute. <IMG> 
is an empty element, so never use a closing tag with it. The browser treats the 
image as it treats a character; normal image alignment is to the baseline of the 
text. Images that are within a line of text must have spaces on both sides, or the 
text will touch the image. 

The <IMG>element only needs the SRC attribute to display an image in the 
browser.The following is a valid <IMG> element that displays a GIF file named logo: 


<IMG SRC="logo.gif"> 


This simplified use of the <IMG> element, however, does not take advan- 
tage of the wide variety of valid attributes. Table 7-3 lists the most commonly 
used attributes. 
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TABLE 7-3 Attrib U 
«IMG» element Sire Se 
attributes ALIGN Specifies the position of the image in relation to the surrounding text 

ALT Displays an alternate string of text instead of an image if the user has a 
text-only browser or has graphics turned off. The Internet Explorer 4.0+ and 
Netscape Navigator 4.0 browsers display the ALT value as a pop-up win- 
dow when a mouse points to the image. 

BORDER Determines whether a border appears on the image. State the border value 
in pixels. You can use this attribute to turn off the hypertext border if the 
image is a link. 

HEIGHT Specifies the height of the image in pixels 

HSPACE Specifies the amount of horizontal white space on the left and right sides 
of the image, in pixels 

SRC The only required attribute, SRC specifies the URL of the graphic file you 
want to display. As with any URL, the path must be relative to the HTML file. 

VSPACE Specifies the amount of vertical white space on the top and bottom sides of 
the image, in pixels 

WIDTH Specifies the width of the image in pixels 

REPLACING «IMG» ATTRIBUTES WITH STYLE SHEETS 
ALIGN, BORDER, VSPACE, and HSPACE have been deprecated in HTML 4.0 in 
favor of CSS. Table 7-Á shows the equivalent CSS properties that replace these 
attributes. 
TABLE 7-4 - A 
CSS properties Deprecated Attribute Equivalent CSS Property 
DRESSER Me ALIGN FLOAT allows you to flow text around an image or other object 
attributes E je 
xample: 


IMG {FLOAT: LEFT} 


BORDER BORDER lets you set a border on an image, or remove the bor- 
der from a linked image 


VSPACE and HSPACE The PADDING or MARGIN properties set white space around 
an image. You can control individual sides of the image, or 
apply white space around the entire image. 


Style properties usually are expressed as global rules that specify the char- 
acteristics for every occurrence of an element. The variety of uses for graphics 


FIGURE 7-6 

Value of ALT attribute 
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in a pop-up text box 
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on a Web page defy a homogenous rule. For example, the following style rule 
makes all images left-aligned: 


IMG (FLOAT:LEFT) 


This rule may be too restrictive because every image in the document will 
be left-aligned. A good alternative is to express the style information using the 
STYLE attribute in the «IMG» element. For example, the following code shows 
two images, one left-aligned and one right-aligned: 


«IMG SRC-"logo.gif" STYLE-"FLOAT:LEFT" WIDTH-40 HEIGHT-40 
ALT-"Company Logo"» 

<IMG SRC="product.gif" STYLE-"FLOAT:RIGHT" WIDTH-80 
HEIGHT-60 ALT-"Our Product"> 


Many of the standard CSS text properties can be used with the <IMG> ele- 
ment.This chapter includes both standard HTML code and, wherever applicable, 
the equivalent CSS properties expressed using the STYLE attribute. 


SPECIFYING ALT ATTRIBUTE TEXT 

In Chapter 4, you learned about the benefits of including ALT attribute text. The 
ALT attribute text is displayed if the image does not appear, providing a descrip- 
tion of the image. In both Internet Explorer 4.0/5.0 and Netscape Navigator 4.0, 
the ALT attribute text also appears as a pop-up when the user places the cursor 
over the image, as illustrated in Figure 7-6. 
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FIGURE 7-7 


Image size reserved 
in the browser 


SPECIFYING IMAGE WIDTH AND HEIGHT 

Every <IMG> element on your Web site should contain WIDTH and HEIGHT 
attributes. These attributes provide important information to the browser by 
specifying the amount of space to reserve for the image. This information dra- 
matically affects the way your pages download, especially at slower connection 
speeds. If you have included the width and height, the browser knows how 
much space the image needs.The browser reserves the space on the page, with- 
out waiting for the image to download, and displays the rest of your text content. 
If the browser does not know the width and height values, it must download the 
image before displaying the rest of the page.This means the user will be looking 
at a blank page, while waiting for the image to download. Figure 7-7 shows the 
result of including the width and height. 
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Following is the code for the image showing the WIDTH and HEIGHT 
attributes. It indicates the browser should reserve a 305 x 185 pixel space for 
the trains.gif image, and should display the alternate text “Trains Picture” if it 
cannot display the image. 


<IMG SRC="trains.gif" WIDTH=305 HEIGHT=185 ALT="Trains 
Picture"> 


If you are not using tables, set the width and height to preserve the look of 
your layout, whether the images are displayed or not. In Figure 7-8, the width 
and height have been omitted. Notice that when the browser does not know 


FIGURE 7-8 
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the width and height, the text wrapping and appearance of the page change 
dramatically when the image is not displayed. 
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If you experiment, you will notice that you can manipulate the width and 
height of the image itself using the WIDTH and HEIGHT attributes in the <IMG> 
element. While it is tempting to use these attributes to change graphic size with- 
out opening a graphics program, it is not a good idea. If the original graphic's 
area is too large and you reduce the size using the WIDTH and HEIGHT attrib- 
utes, you are not changing the file size of the image—only the area that the 
browser reserves for the graphic. The user still is downloading the original 
graphic file.Also, if you do not maintain the ratio of width to height, you distort 
the image. Figure 7-9 shows an image in its actual size, the size after changing 
the width and height values in proportion to one another, and the distorted size 
caused by incorrect width and height values. 
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FIGURE 7-9 
Manipulating images 
with WIDTH and 
HEIGHT attributes 
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In the following code for the three images, the WIDTH and HEIGHT attrib- 
utes are highlighted: 


<!— Globe 1 —> 

«IMG SRC-"globel.gif" WIDTH=100 HEIGHT-100 ALT="Globe"> 
<!— Globe 2 —> 

<IMG SRC-"globel.gif" WIDTH-50 HEIGHT-50 ALT="Globe"> 
<!— Globe 3 —> 

«IMG SRC-"globel.gif" WIDTH-100 HEIGHT-50 ALT="Globe"> 


The ability to manipulate image size using the WIDTH and HEIGHT attrib- 
utes comes in handy in certain circumstances. When creating a layout mock up, 
you can test image sizes by manipulating the code. Also, the transparent pixel 
GIF and single pixel rule tricks described later in this chapter rely on manipu- 
lating image width and height. 


SIZING GRAPHICS FOR THE PAGE 

One way to keep file sizes small is to size graphics appropriately. Nothing is worse 
than opening a new Web page and waiting to download a large 600 x 400 pixel 
image. One of the easiest ways to make your graphics download quickly is to 
keep their dimensions small and appropriate to the size of the page. Figure 7-10 
shows a variety of image sizes at a 640 x 480 screen resolution. 


FIGURE 7-10 


Sample graphic sizes at 
640 x 480 screen 
resolution 
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Use these sample image sizes as guidelines when you size your graphics. 
You also can think of image size in relation to the number of columns in your 
layout. Size your graphics to occupy one, two, or more columns of the page. 


REMOVING THE HYPERTEXT BORDER FROM AN IMAGE 

When you create a hypertext image, the browser's default behavior is to display 
the hypertext border around the image, as shown in Figure 7-11. This border 
appears blue when new, and purple after you click the image. In a well-designed 
site, this border is unnecessary as users often use their mouse to point to each 
image to see if the hypertext cursor appears. Also, the color of the border does 
not always complement your graphic. To remove the hypertext border, add the 
BORDER-O attribute to your «IMG? tag. 
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FIGURE 7-11 


Removing hypertext 
border 
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Here is the code for the second globe that has the hypertext border turned 
off in both standard HTML and CSS: 


<!— Standard HTML —> 

<IMG SRC="globel.gif" WIDTH=100 ALT="GLOBE" BORDER=0 
ALIGN=MIDDLE> 

«1— CSS —> 

«IMG SRC-"globel.gif" WIDTH-100 ALT-"GLOBE" 
STYLE-"BORDER:NONE" ALIGN=MIDDLE> 


ALIGNING TEXT AND IMAGES 

You can align text along an image border using the ALIGN attribute.The default 
alignment of the text and image is bottom-aligned, which means the bottom of 
the text aligns with the bottom edge of the image. You can change the align- 
ment by using either the TOP or MIDDLE values. Figure 7-12 shows all three 
alignment values. 


FIGURE 7-12 
Text alignment 
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The following code shows the three types of alignment and their CSS 
equivalents: 


<!— Standard HTML —> 

<IMG SRC-"cycle.gif" ALIGN-TOP BORDER=1> 

<IMG SRC="cycle.gif" ALIGN-MIDDLE BORDER=1> 

<IMG SRC="cycle.gif" BORDER=1> 

<!— css — 

<IMG SRC="cycle.gif" STYLE="VERTICAL-ALIGN: TOP" BORDER=1> 
<IMG SRC="cycle.gif" STYLE-"VERTICAL-ALIGN:MIDDLE" 
BORDER=1> 

<IMG SRC="cycle.gif" BORDER=1> 


You also can use the ALIGN attribute to wrap text around images. Figure 7-13 
shows two images (the images are turned off), the first left-aligned and the sec- 
ond right-aligned. 
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[8] 125 x 184 image Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
CALIGN-LEFT enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem 
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. 
Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit 
lobortis nisl ut aliquip ex en commodo consequat. Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit, sed diem nonummy — [8] 125 x 184 image 
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem 
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
eu feugiat nulla facilisis at vero eros et accumsan et tusto odio dignissim qui 
blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. 


Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit 
lobortis nisl ut aliquip ex en commodo consequat. 


The following code shows both <IMG> elements and the CSS equivalents: 


<!— Standard HTML —> 

«IMG SRC-"planning.jpg" WIDTH-125 HEIGHT-184 ALT-"125 x 
184 image" ALIGN=LEFT> 

«IMG SRC-"planning.jpg" WIDTH-125 HEIGHT-184 ALT-"125 x 
184 image" ALIGN=RIGHT> 

<!— CSS —> 

<IMG SRC="planning.jpg" WIDTH=125 HEIGHT=184 ALT="125 x 
184 image" STYLE="FLOAT:LEFT"> 

«IMG SRC-"planning.jpg" WIDTH-125 HEIGHT-184 ALT-"125 x 
184 image" STYLE="FLOAT:RIGHT"> 


ADDING WHITE SPACE AROUND IMAGES 
Add white space around your images to reduce clutter and improve readability. 
As shown in Figure 7-14, the default spacing is very close to the image. 


FIGURE 7-14 
Default image spacing 
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Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt 

ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci 

tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. 
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 


blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut 
wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis 
nisl ut aliquip ex en commodo consequat. Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. 


| dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt 
ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci 
tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. 
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To increase the white space around an image, you can add the VSPACE and 
HSPACE attributes to the <IMG> element and set the values to a pixel amount. 
In Figure 7-15, 15 pixels of space are specified for both attributes. VSPACE 
affects both the top and bottom sides, while HSPACE affects both left and right 
sides. The code looks like this: 


<IMG ALIGN=LEFT ALT-"SAILBOAT" BORDER-0 
HSPACE-15 VSPACE-15 SRC="SAIL.GIF"> 


You also can add white space into the graphic itself using graphic editing 
software. 

Cascading Style Sheets offer more control over image white space. You can 
apply the margin properties to individual sides of an image.The following code 
shows an image with a 12-point margin on the right and bottom sides, floating 
to the left of text: 


<IMG ALT-"SAILBOAT" BORDER-0  STYLE-"MARGIN-RIGHT:12pt; 
MARGIN-BOTTOM:12pt; FLOAT:LEFT" SRC="SAIL.GIF"> 
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FIGURE 7-15 


Adding white space 
around an image 
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Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt 
ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci 
tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. 
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
N feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion 
ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Lorem 
ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea 
commodo consequat. Duis te feugifacilisi. 


N 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt 
ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci E 
vv 
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USING TRANSPARENT SPACER GIFS 

As you learned earlier, when you create a GIF or PNG you can choose one color 
to be transparent. Imagine creating a single pixel graphic of just one color and 
then choosing that color to be transparent. The result would be a single-pixel 
transparent block, known as a transparent spacer GIF.The transparent spacer 
GIF can solve spacing problems that cannot be solved with standard HTML.You 
can use the WIDTH and HEIGHT attributes to change the transparent spacer 
GIF to any size you desire. This is a commonly used technique in Web design. 
One HTML editing tool, NetObjects Fusion, uses transparent spacer GIFs as an 
integral part in the way it builds Web pages.You can reuse the same transparent 
spacer GIF over and over on your Web site, and it only has to download once to 
the user's cache. A transparent spacer GIF file is available on the Principles of 
Web Design Companion Web Site for your use. Figure 7-16 shows an example 
of a three-column table with exact column widths specified by the transparent 
spacer GIFS at the top of each column. 


FIGURE 7-16 
Transparent spacer GIFs 
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Here is the code for the second table in Figure 7-16, showing the transpar- 
ent spacer GIFs with the borders turned off. 


<TABLE BORDER WIDTH=400> 

<TR VALIGN=TOP> 

<TD><IMG BORDER=0 HEIGHT=10 WIDTH=100 SRC="transpix.gif" > 
<P>These transparent pixel gifs have the borders turned 
off.</P> 

</TD> 

<TD><IMG BORDER=0 HEIGHT=10 WIDTH=200 SRC="transpix.gif" > 
</TD> 

<TD><IMG BORDER=0 HEIGHT=10 WIDTH=100 SRC="transpix.gif" > 
</TD> 

</TABLE> 


The transparent spacer GIF is occasionally the only way to accomplish a 
desired result. For example, you might use a transparent spacer GIF to enforce 
column widths in tables, or indent or align text in a nonstandard way. As 
Cascading Style Sheets support becomes commonplace, you should be able to 
forego transparent spacer GIFs altogether. 


USING SINGLE-PIXEL RULES 
Single-pixel lines or rules work exactly like transparent spacer GIFs, except they 
are a single color rather than transparent. You can change a single-pixel rule to 
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FIGURE 7-17 
Single-pixel rules 


any size by using the WIDTH and HEIGHT attributes. This creates reusable 
graphics of horizontal or vertical lines of varying thickness that you can use to 
enhance your Web pages layout.A variety of these single-pixel rules are available 
for your use on the Principles of Web Design Companion Web Site. Figure 7-17 
shows the same single-pixel black graphic stretched to different shapes and 
sizes by changes in the WIDTH and HEIGHT attributes in the <IMG> element. 
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WIDTH=80 
HEIGHT=1 


Lorem ipsum dolor-sp-amert, Lorem ipsum dolor sit Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, amet, consectetuer consectetuer adipiscing elit, 
sed diem nonummy nibh adipiscing elit, sed diem sed diem nonummy nibh 
euismod tincidunt/at lacreet nonummy nibh euismod euismod tincidunt ut lacreet 
dolore magna aliguam erat tincidunt ut lacreet dolore magna aliguam erat 
volutpat. dolore magna aliguam volutpat. Ut wisis enim ad 
erat volutpat. Ut wisis minim veniam, quis nostrud 
Ut wisis enim ad minim enim ad minim veniam, exerci tution ullamcorper 
veniam, quis nostrud exerci quis nostrud exerci tution suscipit lobortis nisl ut aliquip 
tution ullamcorper suscitfit ullamcorper suscipit ex ea commodo consequat. 


lobortis nisl ut aliquip ex Duis te feugifacilisi. 


lobortis nisl ut aliqui ex ea 
T ea commodo consequat. 


commodo.» 


feugifad Duis te feugifacilisi. Duis 
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esse molestie consequat, vel in vulputate velit esse in vulputate ve a 
illum dolore eu feugiat nulla molestie consequat, vel molestie consequa, HEIGHT=5 
facilisis at vero eros et illum dolore eu feugiat dolore eu feugiat nulla 

accumsan et iusto odio nulla facilisis at facilisis at vero eros et 


diemiccim enn blandit nraecent PEA 
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Here is the code for the three rules. Notice that each SRC attribute refer- 
ences the same graphic: 
Column One: 


<IMG SRC="blackpix.gif" WIDTH=80 HEIGHT=1 VSPACE=10> 
Column Two: 


<IMG SRC="blackpix.gif" WIDTH=1 HEIGHT=350 ALIGN=LEFT 
HSPACE=10> 


Column Three: 
<IMG SRC="blackpix.gif" WIDTH=80 HEIGHT=5> 
USING BACKGROUND IMAGES 


You can use the BACKGROUND attribute to the <BODY> element to tile images 
across the background of a Web page. Any image can be used as a background 


FIGURE 7-18 
Avoid complicated 
backgrounds for 
text-oriented pages 


FIGURE 7-19 
1075 x 5 background 
graphic from the 


shareware.com 
Web site 
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graphic, though many are not appropriate for the task. In too many Web sites, com- 
plicated background graphics distract the user. If your site includes a lot of text, 
avoid dark or complex backgrounds. Most text does not read well against a back- 
ground image unless the image is light enough to provide a good contrast for the 
text. Changing the text color to create light text on a dark background sometimes 
improves legibility by heightening contrast as illustrated in Figure 7-18. 
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Instead of using a dark, busy image to tile a page background, choose a 
light, simple image. The Web provides many images that you can use to create 
seamless backgrounds that do not interfere with your text. Use background 
images creatively to provide an identifying theme for your site, to frame your 
content at different screen resolutions, or to provide a light, textured back- 
ground.A common technique is to use a thin ribbon graphic that will not repeat 
within the browser window at even the highest screen resolution. This means 
creating a graphic that is longer than 1024 pixels (the highest common screen 
resolution is 1024 x 768 pixels). Figure 7-19 shows an example from the Web. 
The background graphic in the Shareware Web site is a 1075 x 5 pixel graphic. 


White area 
of graphic 
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When this graphic is used as the background, it tiles to create columns of 
color. Figure 7-20 shows the complete page at 800 x 600 screen resolution.The 
color columns created by the background graphic frame the content areas of 


the page. 
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Cascading Style Sheets allow you more control over background image 
tiling than standard HTML.To apply a background image, use the <BODY> ele- 
ment as the selector with the BACKGROUND property as follows: 


BODY (BACKGROUND: URL(texture4.jpg)) 


Note the URL syntax in the rule. The path and filename are contained with 
parentheses. The default for CSS background graphics is the same as using the 
BACKGROUND attribute. The image tiles indefinitely across the page. 

The CSS BACKGROUND-REPEAT property allows you to create a single col- 
umn or row of the image, rather than tiling the image completely across the 
page. Figure 7-21 shows the background image repeated on the y-axis. 

Here is the rule for repeating the graphic on the y-axis: 


BODY (BACKGROUND: URL(texture4.jpg); BACKGROUND-REPEAT: 
REPEAT-Y) 


FIGURE 7-21 


Background graphic 
repeated on y-axis 


FIGURE 7-22 


Background graphic 
repeated on x-axis 
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You also can tile across the x-axis as shown in Figure 7-22. 
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Here is the rule for repeating the graphic on the x-axis: 


BODY (BACKGROUND: URL(texture4.jpg); BACKGROUND-REPEAT: 
REPEAT-X) 


You also can use the BACKGROUND-POSITION property to change the 
position of the background graphic. For example, you can create a right-aligned 
repeat on the y-axis as shown in Figure 7-23. 
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Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut ali 
ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in 
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis 
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril del 
gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nos 
exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo conse 


Here is the rule for right-aligning the background: 


BODY (BACKGROUND: URL(texture4.jpg); BACKGROUND-REPEAT: 
REPEAT-Y BACKGROUND-POSITION RIGHT) 


WORKING WITH HEXADECIMAL COLORS 


HTML uses hexadecimal numbers to express RGB color values. Hexadecimal 
numbers are a base-16 numbering system, so the numbers run from 0 through 9 
and then A through EWhen compared to a standard base-10 numbering system, 
hexadecimal looks strange because it includes letters in the numbering scheme. 
Do not let hexadecimal numbers put you off. All you need is a cross-reference, 
or better yet, a Web page that lists all the colors. The Principles of Web Design 
Companion Web Site has an online color chart you can use. Some HTML refer- 
ence books have a printed color chart of hexadecimal colors, but in general, you 
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TIP 


As described earlier 
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of the following 2-digit 
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browser safe color, 
but OF66FF is not. 
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always should use an online color resource for checking color values because 
you will get a much more realistic view of the actual color. 

Hexadecimal color values are six-digit numbers; the first two define the red 
value, the second two define the green, and the third two define the blue. You 
can use these values in a variety of elements with either the BGCOLOR attribute 
or the COLOR attribute to define color in your Web pages. Cascading Style 
Sheets also accept hexadecimal color values. Hexadecimal values should always 
be contained in quotes and preceded by a number sign as shown: 


<BODY BGCOLOR="#FFFFFF"> 


UNIVERSAL COLOR NAMES 

Although you can use color names for many hexadecimal colors, some browsers 
do not support color names.When in doubt, you are better off using hexadecimal 
values rather than color names.The following 16 basic color names, however, are 
recognized by most browsers and stated in the W3C HTML 4.0 specification. 


Color Name Hex Color Name Hex 
Aqua OOFFFF Navy 000080 
Black 000000 Olive 808000 
Blue 0000FF Purple 800080 
Fuschia FFOOFF Red FF0000 
Gray 808080 Silver COCOCO 
Green 008000 Teal 008080 
Lime 00FF00 White FFFFFF 
Maroon 800000 Yellow FFFFOO 


As you can see from the hexadecimal codes, not all of these colors are 
browser-safe, so make sure to test your work. 

To use these universal color names, state the color in the attribute value, as 
in the example below: 


<BODY BGCOLOR="YELLOW"> 


SETTING BACKGROUND PAGE COLOR 

One of the simplest ways to work with hexadecimal color is to specify a back- 
ground color for your pages. Use the BGCOLOR attribute in the <BODY> ele- 
ment, or with Cascading Style Sheets, use the BACKGROUND-COLOR property 
with BODY as the selector.The following code examples show the background 
color set to white. 
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FIGURE 7-24 


Table background color 


Trip 


You can work with the 
following three layers 
when designing your 

pages: 


1. 


N 


[29] 


The foreground 
layer contains your 
content (text and 
images). 


. The middle layer 


displays the image 
specified in the 
BACKGROUND 
attribute. The 
specified image 
tiles repeatedly. 
With Cascading 
Style Sheets you 
have more control 
over the tiling of 
the image. 


. The background 


layer displays the 
BGCOLOR value. 


Standard HTML: 


<BODY BGCOLOR="#FFFFFF"> 


Cascading Style Sheets: 


BODY {BACKGROUND-COLOR: 


#FFFFFF} 


Remember to use a color that will provide a good contrast for reading your text. 


USING BACKGROUND COLOR IN TABLES 
You can use background color in tables for different purposes, all by using the 
BGCOLOR attribute. The table <TABLE>, table row <TR>, table header <TH>, 
and table data <TD> elements all accept the BGCOLOR attribute. Following are 


a few examples. 


Setting Table Background Color 
You can easily set a background color for an entire table by adding the BGCOLOR 


attribute to the beginning «TABLE» tag. Figure 7-24 shows an example. 


.A. Cleveland Calendar Page - Netscape 


File Edi View Go Communicator Help 


lel E3 


7 Back Forverd 


Reload Home 


Search Netscape 


Print 


Security Stap 


S| u$ Bookmarks E 
ba 


Goto: 


June 1999 


v| Gl” What's Related 


Date 


Event 
Pops Night 7:00 p.m. 


Grade 5 Musical 7 - 9 


BF Evening 5 -7 


Spring Book Fair 


PTA Meeting 7:00 p.m. 


Flag Day 


180th Day of School 


See You Next Year! 


<TABLE CELLPADDING-5 BORDER BGCOLOR="#FFF8DC" 


[Document: Done 


<TR><TH>Date</TH><TH><B>Event</B></TH></TR> 


<TR><TD>2</TD><TD>Pops Night 
<TR><TD>3</TD><TD>Grade 5 Musical 7 


7:00 p.m.</TD></TR> 


9</TD></TR> 


<TR><TD>3</TD><TD>BF Evening 5 -7</TD></TR> 
<TR><TD>3 - 4</TD><TD>Spring Book Fair</TD></TR> 
<TR><TD>9</TD><TD>PTA Meeting 


7:00 p.m.</TD></TR> 


[| 
zd ib d9 ES ^| 7 


WIDTH-300» 


FIGURE 7-25 
Table cell reverse 
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<TR><TD>14</TD><TD>Flag Day</TD></TR> 
<TR><TD>16</TD><TD>180th Day of School</TD></TR> 
</TABLE> 


Creating Reverse Text 

By using the BGCOLOR attribute to set the background color, you can create 
reverse text in table cells. Figure 7-25 shows the first row in the table with the 
BGCOLOR attribute set to red, blue, and green, respectively in each cell, and the 


text color set to white. 


x Background Color - Netscape -Ioj x| 


File Edi View Go Communicator Help 


Forward 


E Back 


Reload Home 


Search Netscape — Print 


Security Stap 


"uf Bookmarks Å Goto: 


Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, 
sed diem nonummy nibh 
euismod tincidunt ut lacreet 
dolore magna aliguam erat 
volutpat. Ut wisis enim ad 
minim veniam, quis nostrud 
exerci tution ullamcorper 
suscipit lobortis nisl ut aliquip 
ex ea commodo consequat. 
Duis te feugifacilisi. Duis 
autem dolor in hendrerit in 
vulputate velit esse molestie 
consequat, vel illum dolore 
eu feugiat nulla facilisis at 


In this example the «FONT? element is setting the text color, but a CSS rule 
would accomplish the same result.The code for the Column 1 cell looks like this: 


ument: Done 


Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, 
sed diem nonummy nibh 
euismod tincidunt ut lacreet 
dolore magna aliguam erat 
volutpat. Ut wisis enim ad 
minim veniam, quis nostrud 
exerci tution ullamcorper 
suscipit lobortis nisl ut 
aliquip ex ea commodo 
consequat. Duis te 
feugifacilisi. Duis autem 
dolor in hendrerit in 
vulputate velit esse molestie 
consequat, vel illum dolore 


oc ce . 


i 0 Doemer Doe OOOO zi 


Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, 
sed diem nonummy nibh 
euismod tincidunt ut lacreet 
dolore magna aliguam erat 
volutpat. Ut wisis enim ad 
minim veniam, quis nostrud 
exerci tution ullamcorper 
suscipit lobortis nisl ut aliquip 
ex ea commodo consequat. 
Duis te feugifacilisi. Duis 
autem dolor in hendrerit in 
vulputate velit esse molestie 
consequat, vel illum dolore 
eu feugiat nulla facilisis at 


«TH BGCOLOR="#000000"><FONT COLOR="#FFFFFF">Column 


1</FONT></TH> 


Creating Continuous Color Areas 


v| Gu" What's Related 


By combining the BGCOLOR attribute with a table that has default spacing 
turned off, you can create continuous seamless areas of color. Remember to 
remove the default table spacing by setting the attribute values as shown in the 


following «TABLE» tag: 
<TABLE BORDER=0, CELLPADDING=0, CELLSPACING=0> 


If you do not remove the default spacing, you will see the separations 
between each cell. Figure 7-26 shows a table that uses this technique. 
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FIGURE 7-26 
Continuous color areas 


X Background Color Areas - Netscape 


Foral 


DO Il 


The code for the table follows: 


«TABLE WIDTH-600 BORDER-0 CELLPADDING-0 CELLSPACING-0» 
<TR><TD COLSPAN-3 BGCOLOR="#CCCCCC" ALIGN=CENTER>Top 
Cell</TD></TR> 

<TR><TD HEIGHT-300 WIDTH=15% BGCOLOR="#C0C0C0O">Column 
1</TD> <TD WIDTH=70%>Column 2«/TD» «TD WIDTH-15$ 
BGCOLOR=" #C0C0C0">Column 3</TD></TR> 

<TR><TD COLSPAN-3 BGCOLOR=" #C0C0C0" ALIGN=CENTER>Bottom 
Cell</TD></TR> 

</TABLE> 


CHANGING LINK COLORS 


You can change your hypertext link colors using hexadecimal values or stan- 


dard color names.The following three attributes all reside within the <BODY> 
element: 


LINK: The unvisited link color. The default is blue. 

ALINK: The active link color.This is the color that displays when the user 
points to a link and holds down the mouse button. The default is red. 
VLINK: The visited link color. The default is purple. 

Here is an example of the syntax: 


<BODY LINK-"CC3399" VLINK="9900FF"> 
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Now that you have the capability of changing link colors, do not rush out 


and change all your links to different colors until you think about the conse- 
quences for your users. They probably are expecting the default blue and pur- 
ple links. This does not mean you should not change link colors. Many sites 
change their links to match their design color scheme. Changing link colors is 
acceptable as long as you maintain color consistency and preserve the contrast 
between the new and visited link colors to provide a recognizable difference to 
the user. 


SUMMARY & REVIEW 


You currently can use only three image file formats on the Web: GIF, JPG, and PNG. 
These formats all compress images to create smaller files. Choose the appropriate file 
format, or your image will not compress and appear as you expect. 

Your computer monitor displays color by mixing three basic colors of light: red, green, 
and blue. Colors vary widely from one monitor to another, based on both the user's 
preferences and the exact brand of equipment. 

Most monitors have a resolution of 72 dpi. When creating, scanning, or importing 
images, always change the final resolution to 72 dpi. 

Most Web designers use graphic design software to resize images or convert them 
from one file format to another. More complex tasks could include changing color 
depth or adding transparency to an image. 

Use the «IMG» element to display images in a browser. It is a replaced element, mean- 
ing that the browser replaces the «IMG» element with the image file referenced in the 
SRC attribute. The browser treats the image as it treats a character; normal image 
alignment is to the baseline of the text. Images that are within a line of text must have 
spaces on both sides, or the text will touch the image. 

Reduce image size to the appropriate dimensions for a Web page. If you must use a 
larger image, let the user view a thumbnail first, and provide the file size information. 
Work with a limited Web-safe palette when creating graphics. 

HTML uses hexadecimal numbers to express RGB color values. Hexadecimal color val- 
ues are six-digit numbers; the first two define the red value, the second two define the 
green value, and the third two define the blue value. You can use these values in a vari- 
ety of elements with either the BGCOLOR attribute or the COLOR attribute to define 
color in your Web pages. Cascading Style Sheets also accept hexadecimal color values. 
Test your work. Browsers and computing platforms render colors differently. Test at dif- 
ferent color depths, also. 


REVIEW QUESTIONS 


Qr CoU B3 o 


What are the three image file formats you can use on a Web site? 
Which file formats support 24-bit color? 

Explain the file's color depth control. 

How many colors does GIF support? 

What is lossless file compression? 
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Which file formats support transparency? 

What are the drawbacks of using animated GIFs? 

Explain lossy image compression. 

What image characteristics can you control using the JPG format? 

Why is PNG not a popular image format? 

What are the display characteristics of an interlaced image? 

What are some options for acquiring images for your site? 

Which image format should you use for a two-color company logo? 

Which image format should you use for a photograph? 

Which image format should you use for text with a gradient drop-shadow? 
What happens when you display a 24-bit image on an 8-bit monitor? 

What three attributes should you always include in the image tag? Why should you 
include them? 

What is the attribute and value for removing the hypertext border for an image? 
How many layers can you work with when designing pages? 


. Which table elements accept the BGCOLOR attribute? 


PROJECTS 


1. 


Practice using the ALIGN image attribute: 

a. Download an image from the Principles of Web Design Companion Web Site or 
find an image of your own. 

b. Add text around the image. Experiment with the ALIGN attribute and its values to 
view the way text wraps. 

c. Test the work in multiple browsers to verify that the text wraps consistently. 

Practice using the spacing image attributes: 

a. Download an image from the Principles of Web Design Companion Web Site or 
find an image of your own. 

b. Add text around the image. Experiment with the HSPACE and VSPACE attributes to 
add white space around the image. 

C. Test the work in multiple browsers to verify that the text spacing is consistent. 

Practice using WIDTH and HEIGHT image attributes: 

a. Download an image from the Principles of Web Design Companion Web Site or 
find an image of your own. 

b. Build a simple page that contains text and multiple images. Do not include the 
WIDTH and HEIGHT attributes in the IMG tag. 

c. With the images turned off in your browser, view the page. 

d. Add the appropriate width and height information to the <IMG> tag for each image. 

e. Again, turn the images off in your browser and view the page. Note the differ- 
ences between the two results and the way your layout is affected. 

Download the transparent spacer GIF from the Principles of Web Design Companion 

Web Site (transpix.gif). 

a. Build a simple layout. 

b. Testthe capabilities of the transparent spacer GIF. Change the WIDTH and HEIGHT 
attributes to manipulate the size of the image and its spacing on the page. 
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Download one of the single-color pixel graphics from the Principles of Web Design 

Companion Web Site (bluepix.gif, redpix.gif, blackpix.gif, graypix.gif). 

a. Build a simple layout. 

b. Test the capabilities of the single-pixel GIFs. Change the WIDTH and HEIGHT 
attributes to manipulate the size of the image and its use on the page. 

Experiment with background color in tables. Use the BGCOLOR attribute at different 

levels of a sample table to add color. Test the result in both Internet Explorer and 

Netscape Navigator. Note the ways that both browsers handle table color. 

Browse the Web for sites that make effective use of background images. Choose a 

Web site and write a short design description of how the background images enhance 

the site. 

Browse the Web for sites that make effective use of color. Pick a site that has a defi- 

nite color scheme, and write a short design critique that explains how the use of color 

enhances the site. 


CASE STUDY 


Gather or create the boilerplate graphics to use on the different pages of your site. These 
include any banner, navigation, section, or identifying graphics. Add these graphics to the test 
pages of your site. Test the images in multiple browsers to make sure they display properly. 


Determine the color choices for your Web site. Pick the colors you will use for text, back- 


ground color in tables, and page backgrounds. If you will be using single-color graphics, such 
as lines or bullets, create them now. 


Establish graphics standards for your Web site, including but not limited to the following: 


Determine if you will use a standard amount of white space around each graphic. 
Determine exactly which <IMG> attributes should be included in all <IMG> tags. 
Formulate a standard for all ALT attributes. 

Formulate a lowest common denominator set of image standards for your site. This 
will be used as the base-level display standard for testing your graphics. 

Write a short standards document that can be provided to anyone contributing to the site. 


